<template>
  <div>
    <div style="display: flex;justify-content: center;margin-top: 150px">
      <el-card style="width: 400px">
        <div slot="header" class="clearfix">
          <span>登录</span>
        </div>
        <table>
          <tr>
            <td>用户名</td>
            <td>
              <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </td>
          </tr>
          <tr>
            <td>密码</td>
            <td>
              <el-input type="password" v-model="user.password" placeholder="请输入密码"
                        @keydown.enter.native="doLogin"></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <el-button style="width: 300px" type="primary" @click="doLogin">登录
              </el-button>
            </td>
          </tr>
        </table>
      </el-card>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        user: {
          username: 'admin',
          password: '123456',
        }
      }
    },
    methods: {
      doLogin() {
        this.$axios({
          method: 'post',
          headers: {
            'Content-Type': 'application/json'
          },
          url: 'http://127.0.0.1:8080/login',
          data: this.qs.parse(this.user)
        }).then((response) => {
          if (response.data.msg == "SUCCESS") {
            this.$message({
              message: '登录成功，欢迎回来！',
              type: 'success'
            });
            localStorage.setItem("token", response.data.data.token);
            localStorage.setItem("username", response.data.data.username);
            localStorage.setItem("uId", response.data.data.uId);
            localStorage.setItem("perms", response.data.data.perms);
            this.$router.push("/homePage");
          } else {
            this.$message.error('登录失败，请检查帐号密码后重试！');
          }
        }).catch((error) => {
          console.log(error)
        })

      }
    }
  }
</script>
